<template>
  <view>
    <!-- <view class="order-status">2天1小时9分钟后开场</view> -->
    <view class="order-status flex flex-m flex-c order-fail">
      <!-- order-success -->
      <zm-image
        :src="
          PayStatus === '订单成功' ? '/icon-countDown.png' : '/order-fail.png'
        "
        is-join
        custom-style="width:40rpx;height:40rpx;margin-right:20rpx;"
        v-if="isPay"
      ></zm-image>
      <view class="flex">
        <view v-if="isPay">{{ PayStatus }}</view>
        <template v-else>
          <view v-if="obj.orderStatus === 'film-2'">
            <!--抖音小程序第一次进入找不到方法time orderStatusName-->
            <u-count-down
              v-if="time && time !== 0"
              :time="time"
              format="DD:HH:mm:ss"
              auto-start
              millisecond
              @change="onChange"
              @finish="onReload"
            >
              <view class="time">
                <text class="time__item">{{ timeData.days }}天</text>
                <text class="time__item"
                  >{{
                    timeData.hours > 10 || timeData.hours === 10
                      ? timeData.hours
                      : '0' + timeData.hours
                  }}时</text
                >
                <text class="time__item"
                  >{{
                    timeData.minutes > 10
                      ? timeData.minutes
                      : '0' + timeData.minutes
                  }}分</text
                >
              </view>
            </u-count-down>
          </view>
          {{ orderStatusName ? orderStatusName : '' }}
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  export default {
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isPay: {
        type: Boolean,
        default: false
      },
      status: {
        type: String,
        default: ''
      }
    },
    components: {
      ZmImage
    },
    data() {
      return {
        timeData: {}
      }
    },
    // created() {},
    methods: {
      handleClick() {
        this.$emit('click')
      },
      onChange(e) {
        this.timeData = e
      },
      onReload() {
        this.$emit('refresh')
      }
    },
    computed: {
      //  影片订单 showStatus: 0 => '待支付',( 1 => '待出票', 2 => '未放映', 3 => '已放映', 4 => '购票失败', 5 => '已退票',，        6=>'已取消')
      // 商品订单 orderStatus 0 未支付   （1 已支付 2 放弃订单 3 超时取消）      4 订单成功      （refundStatus 1 refundMoneyStatus 1） 已退款
      orderStatusName() {
        if (+this.obj.refundStatus === 1 && +this.obj.refundMoneyStatus === 1) {
          return '已退款'
        } else {
          const map = {
            'film-0': '待支付',
            'film-1': '待出票',
            'film-2': '后开场',
            'film-3': '已放映',
            'film-4': '购票失败',
            'film-5': '已退票',
            'film-6': '已取消',
            'mall-0': '未支付',
            'mall-1': '已支付',
            'mall-2': '放弃订单',
            'mall-3': '超时取消',
            'mall-4': '订单成功'
          }
          return map[this.obj.orderStatus] || '-'
        }
      },
      PayStatus() {
        return this.status === '4' ? '订单成功' : '订单失败'
      },
      time() {
        if (this.obj.orderStatus === 'film-2') {
          let date = this.obj.sDate + ' ' + this.obj.sTime
          date = date.replace(new RegExp('-', 'gm'), '/')
          const time = new Date(date).getTime() - new Date()
          return time
        } else {
          return 0
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-status {
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 36rpx;
  }
  .time {
    @include flex;
    align-items: center;

    &__item {
      font-size: 36rpx;
      color: #fff;
      text-align: center;
    }
  }
</style>
